<template>
    <div class="bottombox">
        <div v-for="(item, index) in iconlist" :key="index" @click="changeStatus(index)"
            :class="{ checked: pindex == index }">
            <span :class="{ iconfont: true, [item.icon]: true }"></span>
            {{ item.name }}
        </div>

    </div>
</template>

<script>
export default {
    name: 'App',

    data() {
        return {
            pindex: 0,
            iconlist: [
                { id: 1, icon: "icon-elment", status: false, name: "首页" },
                { id: 2, icon: "icon-dingdan", status: false, name: "订单" },
                { id: 3, icon: "icon-wode", status: false, name: "我的" },
            ]
        }
    },
    methods: {
        changeStatus(index) { //更改任务状态, item参数就是 当前点击的任务对象
            this.pindex = index
        },
    }
}

</script>

<style>
.bottombox {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-around;
}

.bottombox div {
    box-sizing: border-box;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}

.bottombox div span {
    font-size: 16px;
}

.bottombox .checked {
    color: #0ca6ff;
}
</style>